<template>
    <div class="layout">
        <el-checkbox-group v-model="checkedList" class="group" @change="handleChange">
            <el-row :gutter="16">
                <el-col v-for="(item, index) in tableData" :key="index" :span="6" class="container">
                    <div class="container_img">
                        <div class="checked">
                            <el-checkbox :label="item.id"></el-checkbox>
                        </div>
                        <div v-show="item.is_radar" class="radar_icon"></div>
                        <div class="file">
                            <div class="file_container">
                                <div class="file_container_left">
                                    <div class="file_title">
                                        <span class="zw-text-ellipsis2">{{ item.title }}</span>
                                        <img
                                            v-if="item.type == 7"
                                            class="icon_img"
                                            src="/static/material/link.png"
                                            alt="" />
                                    </div>
                                    <div class="file_text">
                                        <span class="first">{{ item.desc }}</span>
                                    </div>
                                </div>
                                <div class="file_container_right">
                                    <img :src="item.cover_image_url" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="container_text">
                        <div class="tag_box">
                            <el-popover
                                v-if="item.tags.length > 0 || item.share_tags.length > 0"
                                :width="300"
                                trigger="hover"
                                popper-class="auto_width">
                                <template #reference>
                                    <div class="zw-el-tags">
                                        <el-tag v-for="tag in getTags(item.tags, item.share_tags, 1)" :key="tag.id">
                                            {{ tag.name }}
                                        </el-tag>
                                    </div>
                                </template>
                                <template #default>
                                    <div class="zw-el-tags">
                                        <el-tag v-for="tag in getTags(item.tags, item.share_tags, 2)" :key="tag.id">
                                            {{ tag.name }}
                                        </el-tag>
                                    </div>
                                </template>
                            </el-popover>
                        </div>
                        <div class="time">
                            <span>{{ item.created_at }}</span>
                            <span>上传者:{{ item.user_name }}</span>
                        </div>
                    </div>
                    <div class="iconList">
                        <template v-for="(icon, key, index) in item.compilesss" :key="index">
                            <div
                                v-auth="power[key]"
                                :class="['icon_item', key != 2 ? '' : 'active2']"
                                @click="selectItem(item, key)">
                                <el-tooltip class="box-item" effect="dark" :content="icon.content" placement="top">
                                    <img
                                        v-if="key != 2"
                                        :id="key.toString()"
                                        :src="`/static/material/compile${icon.isShow ? 'Red' : ''}Icon${key + 1}.png`"
                                        alt=""
                                        @mouseover="item.compilesss[key].isShow = true"
                                        @mouseout="item.compilesss[key].isShow = false" />
                                </el-tooltip>
                            </div>
                        </template>
                        <!-- <div class="icon_item" v-for="index in [1, 2, 4]" :key="index" v-auth="power[index - 1]" @click="selectItem(index, item)">
              <img :id="index" :src="`/static/material/compileRedIcon${index}.png`" alt="" v-if="selectId == item.id && selectIndex == index" />
              <img :id="index" :src="`/static/material/compileIcon${index}.png`" alt="" v-else />
            </div> -->
                    </div>
                </el-col>
            </el-row>
        </el-checkbox-group>
    </div>

    <ShareConfiguration
        v-if="isShowConfiguration"
        :id="content_id"
        v-model:show="isShowConfiguration"
        :type="linkType" />
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useStore } from '@/store';
import bus from '@/utils/bus';
import { useRouter } from 'vue-router';
import useClipboard from 'vue-clipboard3';
import { ElMessage } from 'element-plus';
import ShareConfiguration from '@/components/common/ShareConfiguration.vue';

const router = useRouter();
const store = useStore();
const emit = defineEmits({
    isBatch: null
});
const props = defineProps(['tableData']);
const checkedList = ref([]);
const selectId = ref();
const selectIndex = ref();
const power = ref(['LOOK_DETAILS_LK', 'DEL_LK', 'DOW_LK', 'EDIT_LK']);
const isShowConfiguration = ref<boolean>(false);
const content_id = ref<number>(0);
const linkType = ref<number>(6);

const { toClipboard } = useClipboard();

// 多选
const handleChange = (value: string[]) => {
    const checkedCount = value.length;
    const checkAll = checkedCount === props.tableData.length;
    bus.emit('change', checkedList.value);
    bus.emit('autoCheckedAll', checkAll);
    store.dispatch('table', {
        tableData: checkedList
    });
};
const clearSelection = () => {
    bus.emit('change', []);
    bus.emit('autoCheckedAll', false);
    store.dispatch('table', {
        tableData: []
    });
    checkedList.value = [];
};

//合并
const getTags = (arr1: any, arr2: any, type: any) => {
    if (type == 1) {
        return arr1.concat(arr2).slice(0, 4);
    } else {
        return arr1.concat(arr2);
    }
};
// 全选
const checkAll = (value: any) => {
    if (value) {
        props.tableData.forEach((item: any) => {
            checkedList.value.push(item.id as never);
        });
        bus.emit('change', checkedList.value);
        store.dispatch('table', {
            tableData: checkedList,
            tableAll: true
        });
    } else {
        checkedList.value = [];
    }
};
// 添加全选监听事件
bus.on('checkAll', checkAll);
//编辑
const selectItem = (item: any, key: any) => {
    selectIndex.value = item.compilesss[key].name;
    item.compilesss[key].isShow = true;
    selectId.value = item.id;
    if (selectIndex.value == 'write') {
        const params = {
            media_content_id: item.id,
            type: item.type
        };
        if (item.type == 6) {
            router.push(`/content/basematerial/link/createdLink?val=${item.type}&id=${item.id}&type=edit`);
            return;
        }
        store.dispatch('content/upload', {
            uploadVisib: true,
            title: '编辑链接',
            type: item.type
        });
        bus.emit('editItem', params);
    } else if (selectIndex.value == 'delete') {
        emit('isBatch', item.id);
    } else if (selectIndex.value == 'statistics') {
        const is_external_link = !item.absolute_url.includes('keyid.cn');
        router.push(
            `/content/basematerial/statement?id=${item.id}&title=${item.title}&is_external_link=${is_external_link}`
        );
    } else if (selectIndex.value == 'copy') {
        linkType.value = item.type;
        content_id.value = item.id;
        isShowConfiguration.value = true;
    } else {
        // console.log(item);
        // window.location = data.cover_image_url
    }
};
// 复制
const onCopy = async (v: any) => {
    try {
        await toClipboard(v);
        ElMessage.success('复制成功');
    } catch (e) {
        ElMessage.error('复制失败');
    }
};
defineExpose({ checkAll, clearSelection });
onMounted(() => {
    store.dispatch('table', {
        tableData: [],
        tableAll: false
    });
});
// 修改 popover 样式
const style = reactive({
    display: 'flex',
    color: '#ff6b00',
    'flex-wrap': 'wrap'
});
const tagStyle = reactive({
    border: '1px solid #ffc69e',
    padding: '0 4px',
    'white-space': 'nowrap',
    'line-height': '22px',
    margin: '0 5px 10px'
});
</script>

<style lang="scss" scoped>
.group {
    width: 100%;
}

.container {
    padding: 8px;

    &_img {
        position: relative;

        .checked {
            position: absolute;
            left: 13px;

            :deep .el-checkbox__label {
                display: none;
            }
        }

        .radar_icon {
            position: absolute;
            top: 10px;
            right: 12px;
            width: 22px;
            height: 22px;
            background: url('@/assets/image/material/radar_red.png') no-repeat;
            background-size: 100%;
            z-index: 1;
        }

        .file {
            border: 1px solid #eaeaea;
            border-bottom: none;
            padding: 10px;

            &_container {
                margin-top: 30px;
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: space-around;

                &_left {
                    flex: 1;

                    .file_title {
                        display: flex;
                        align-items: flex-start;
                        font-size: 14px;
                        font-weight: 500;
                        line-height: 18px;
                        color: #33302d;
                        margin-right: 8px;

                        > span {
                            word-break: break-all;
                        }

                        .icon_img {
                            margin-left: 2px;
                            width: 16px;
                            height: 16px;
                        }
                    }

                    .file_text {
                        margin-top: 4px;
                        width: 125px;
                        font-size: 12px;
                        font-weight: 300;
                        color: #969696;
                        line-height: 14px;

                        .first {
                            word-break: break-all;
                            height: 28px;
                            overflow: hidden;
                            white-space: wrap;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                    }
                }

                &_right {
                    width: 60px;
                    height: 60px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }

    &_text {
        margin-top: -4px;
        padding: 10px;
        border: 1px solid #eaeaea;
        border-top: none;

        .tagList {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #ff6b00;
            margin-bottom: 10px;
            overflow: hidden;

            .tag_item {
                height: 22px;
                line-height: 22px;
                padding: 0 4px;
                background: #fff;
                border: 1px solid #ffc69e;
                border-radius: 2px;
                margin: 0 5px;
                white-space: nowrap;
                cursor: pointer;

                &:nth-child(n + 5) {
                    display: none;
                }
            }
        }

        .tag_box {
            height: 24px;
            overflow: hidden;
        }

        .describe {
            width: 286px;
            height: 14px;
            margin: 12px 0 8px;
            line-height: 14px;
            font-size: 14px;
            display: flex;
            align-items: center;

            &_text {
                display: inline-block;
                width: 255px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .time {
            width: 100%;
            display: flex;
            justify-content: space-between;
            height: 18px;
            line-height: 18px;
            color: #969696;
            font-weight: 300;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .iconList {
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 2px;
        border: 1px solid #eaeaea;
        border-top: none;
        height: 40px;

        .icon_item {
            width: 19px;
            height: 19px;
            cursor: pointer;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}

.active2 {
    display: none;
}
</style>
